﻿<%@ Page Title="报表管理" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
	<link href="../assets/css/plugins/jsTree/style.min.css" rel="stylesheet" />
	<link href="../assets/css/plugins/iCheck/customsmall.css" rel="stylesheet" />
	<link href="../assets/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />

	<style>
		.system-box .right-side {
			width: 100%;
		}
		
		.system-box .right-content-box {
			overflow: hidden;
		}
		
		.mainContent {
			height: 100%;
			background-color: #ffffff;
			min-width: 650px;
		}
		
		.mainContent .part {
			height: 100%;
			display: inline-block;
			background-color: #ffffff;
			vertical-align: top;
			border: 1px solid #dddddd;
		}
		
		.mainContent .part .title {
			border-bottom: 1px solid #dddddd;
			height: 30px;
			line-height: 30px;
			padding-left: 5px;
			background-color: #eee;
		}
		
		.leftPart {
			width: calc(100% - 210px);
			min-width: 320px;
			overflow: auto;
		}
		
		.MessagePart {
			width: 205px;
			overflow: auto;
		}
		
		.rightPart .titleText {
			height: 30px;
			line-height: 30px;
			display: inline-block;
		}
		
		.searchbox {
			width: 180px;
			display: inline-block;
			float: right;
		}
		
		.btn-filter-users {
			-ms-border-radius: 0px;
			border-radius: 0px;
		}
		
		table {
			table-layout: fixed;
		}
		
		td {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.dropdownColor {
			color: #000000 !important;
			background-color: #ffffff !important;
			border-color: #ccc !important;
		}
		
		.form-horizontal {
			margin-top: 10px;
		}
		
		#ReportList tr.check,
		.table-select tbody tr.check td:first-child {
			border-left: 4px solid #7acf89;
		}
		
		#ReportList tr.check td,
		.table-select tbody tr.check td {
			background: #dff0d8;
			color: #222121;
		}
		
		.leftPart .form-horizontal .form-group {
			margin-right: 0px;
		}
		
		.condition {
			padding: 5px;
		}
		
		.wxBox {
			right: 2px;
			top: 2px;
			display: inline-block;
		}
		
		.wxBox .dropdown-toggle {
			padding-top: 3px !important;
			padding-bottom: 3px !important;
		}
		
		.wxBox .wxTitle {
			display: inline-block;
			position: relative;
			top: 2px;
		}
		
		.wxBox .wxSelect {
			display: inline-block;
			min-width: 350px;
		}
		
		.wxBox2 {
			right: 2px;
			top: 2px;
			display: block;
		}
		/*.wxBox2 .dropdown-toggle { padding-top: 3px !important; padding-bottom: 3px !important; }*/
		
		.wxBox2 .wxTitle {
			display: inline-block;
			position: relative;
			top: 2px;
		}
		
		.wxBox2 .wxSelect {
			display: block;
			min-width: 350px;
		}
		
		.sweet-alert h2 {
			line-height: 25px !important;
		}
		
		li {
			list-style: none;
		}
		
		.iconItme {
			width: 60px;
			height: 70px;
			padding: 10px 0;
			float: left;
			position: relative;
		}
		
		.iconItme img {
			width: auto;
			height: 100%;
		}
		
		.iconItme .selectIcon {
			width: 20px;
			height: 20px;
			position: absolute;
			display: none;
			top: 0;
			left: -10px;
			background-image: url(../assets/img/validate/accept.png);
			background-size: cover;
		}
		
		.iconItme .selectIconHide {
			display: none;
		}
		
		.iconItme .selectIconShow {
			display: block;
		}
		
		.active {
			/*border: 2px solid green;*/
			box-shadow: 1px 2px 4px #999999;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
	<div class="system-box">
		<div class="right-side">
			<div class="btns-container"></div>
			<div class="condition">
				<div class="wxBox">
					<div class="wxTitle">企业微信：</div>
					<div class="wxSelect">
						<select id="wxWorkSelectList" class="selectpicker" title="选择消息类型" data-style="dropdownColor" data-width="100%">
						</select>
					</div>
				</div>
			</div>
			<div class="right-content-box">
				<%--<div class="header-tips">企业微信用户报表授权</div>--%>
				<div class="mainContent">
					<div class="MessagePart part">
						<div class="title">
							<div class="titleText">
								报表列表
							</div>
						</div>
						<div id="">
							<table class="footable table table-stripped table-list">
								<thead>
									<tr>
										<th style="width: 35px;"> </th>
										<th>报表名称</th>
									</tr>
								</thead>
								<tbody id="ReportList"></tbody>
							</table>
						</div>
					</div>
					<div class="leftPart part">
						<div class="title">
							报表内容
						</div>
						<div>
							<form class="form-horizontal">

								<div class="form-group">
									<label class="col-sm-2 control-label" for="Title">报表标题</label>
									<div class="col-sm-9">
										<input class="form-control" type="text" id="Title" placeholder="">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label" for="Link">报表链接</label>
									<div class="col-sm-9">
										<input class="form-control" type="text" id="Link" placeholder="">
									</div>
								</div>

								<div class="form-group">
									<label class="col-sm-2 control-label" for="CIdentification">企业微信</label>
									<div class="col-sm-9">
										<div class="wxBox2">

											<select id="CIdentification" class="selectpicker" title="选择企业微信" data-style="dropdownColor" data-width="100%">
											</select>

										</div>
									</div>
								</div>
								<!--自定义图标-->
								<div class="form-group">
									<label class="col-sm-2 control-label" for="selectIcon">报表图标</label>
									<div class="col-sm-9">
										<div class="wxBox2" style="overflow: scroll;border: 1px solid #e5e6e7;" id="selectIcon">
											<ul id="wxBox2">

											</ul>

										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
	<script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
	<script src="../assets/js/plugins/iCheck/icheckAll.js"></script>
	<script src="../assets/js/page/rScroll.js"></script>
	<script src="../assets/js/page/pageControl.js"></script>
	<%--<script src="../assets/js/page/tableControl.js"></script>--%>
	<script src="../assets/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<script src="../assets/js/plugins/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>

	<script type="text/html" id="tpl-msg-item">
		{{# for(var i = 0, len = d.length; i
		< len; i++){ }} <tr {{# if(i%2==0 ){ }} class="gradeX footable-even" {{# }else{ }} class="gradeX footable-odd" {{# } }}>
			<td class="Id" style="display: none;">{{d[i].Id}}</td>
			<td><input type="radio" name="msg" class="checkPlan" data-index="{{i}}" /></td>
			<td class="Title" title="{{d[i].Title}}">{{d[i].Title}}</td>
			</tr>
			{{# } }}
	</script>
	<script>
		$(document).ready(function() {
			//layer.msg('玩命加载中……', { icon: 16, shade: 0.01, time: 0, maxWidth: 200 });

			//模块ID
			var ModuleID = Y.getUrlParam("ModuleID");

			//获取按钮
			commonUtil.loadBtnList(ModuleID, function() {
				rScroll();
			});

			//绑定下拉框
			var bindWxCorpInfoList = function(controller, action, params, els, size, setDefault, callback) {
				Y.API2(controller, action, params, function(data) {
					if(data.Success == false) {
						swal(data.Message, '', 'error');
					} else {
						var html = '';
						if(setDefault) {
							html = '<option value="">请选择</option>';
						}
						data.map(function(item) {
							html += '<option value=' + item.CIdentification + '>' + (item.CorpName + '-' + item.AgentName) + '</option>';
						});
						els.map(function(item) {
							$(item).html("");
							$(item).html(html);
							$(item).selectpicker({
								size: size,
								'title': '请选择'
							});
							$(item).selectpicker('refresh');
						});
						if(typeof callback === "function") {
							callback();
						}
					}
				});
			}
			//绑定数据到企业微信下拉框
			var loadWxCorpInfoList = function(els, callback) {
				bindWxCorpInfoList('WxCorpInfo', 'GetWxCorpInfoList', {}, els, 8, true, callback);
			}
			var loadCIdentification = function(els, callback) {
				bindWxCorpInfoList('WxCorpInfo', 'GetWxCorpInfoList', {}, els, 6, false, callback);
			}
			var selectAdd = null;

			var iconItemHeight = function() {
				return $('.system-box').height() - 150 - $('.title').outerHeight() - ($('.form-group').outerHeight() * 3);
			};

			//获取自定义图标
			var bindSelectIcon = function() {
				Y.API2('WxReport', 'GetIconUrl', {}, function(data) {
					if(data.Success == false) {
						swal(data.Message, '', 'error');
					} else {
						//						console.log(data)

						$('#selectIcon').height(iconItemHeight())
						var htmlLi = '';
						data.forEach(function(item, index) {

							item = item.replace("WeixinWork\\Icon\\", "/WeixinWork/Icon/")
							if(index == 0) {
								htmlLi += '<li class="iconItme"><img class="active" id="' + item + '" src="' + item + '"><span class="selectIcon selectIconShow"></span></li>'
							} else {
								htmlLi += '<li class="iconItme"><img id="' + item + '" src="' + item + '"><span class="selectIcon selectIconHide"></span></li>'
							}
						})
						$('#wxBox2').append(htmlLi)

					}
				})
			}

			//自动高 DOCUMENT高减按钮栏+其它
			//$(".chooseArea .leftArea1").height($(document).height() - (35 + 145));

			//如果有错误就弹出来并返回
			var errorIfNull = function(val, msg) {
				var tmp = val || "";
				if(tmp === "") {
					swal(msg, '', 'error');
					return true;
				}
				return false;
			}

			//重置表单
			var resetAllInput = function() {
				$('#Id').val("");
				$('#Title').val("");
				$('#Link').val("");
				$('#CIdentification').val("");
				$('#CIdentification').selectpicker('val', "xx");
			};

			//获取列表
			var loadReportList = function() {
				//获取顶部的过滤条件
				var wxWorkId = $('#wxWorkSelectList').selectpicker('val');
				//console.log("wxWorkId=" + wxWorkId);
				pageControl.init('WxReport', 'Report_GetList', {
					needLayer: true,
					CIdentification: wxWorkId,
					alwaysCallBack: function() {
						$('#ReportList').empty();
					}
				}, function(result) {
					var tBody = [];
					if(!Y.checkNull(result)) {
						if(result.data.length == 0) {
							Y.NoData(body, 5);
							return false;
						}
						var pl = document.getElementById('tpl-msg-item').innerHTML;
						laytpl(pl).render(result.data, function(html) {
							document.getElementById('ReportList').innerHTML = html;

							$(".checkPlan").iCheck({
								checkboxClass: "icheckbox_square-green",
								radioClass: "iradio_square-green"
							});

							$('.checkPlan').on('ifChecked', function(event) {
								$('.footable tr').removeClass('check');
								$(this).parents('tr').addClass('check');
							});

							resetAllInput();
						});
						rScroll();
					}
				});
			}

			//选中记录
			$('#ReportList').on('click', 'tr', function() {
				var parentTr = $('#ReportList tr');
				if($(this).hasClass('check')) {
					$(parentTr).removeClass('check');
					$(parentTr).find('.checkPlan').iCheck('uncheck');
				} else {
					$(parentTr).removeClass('check');
					$(this).addClass('check');

					$(parentTr).find('.checkPlan').iCheck('uncheck');
					$(this).find('.checkPlan').iCheck('check');

					//getdetail
					var id = $(this).find('.Id').text();
					Y.API2('WxReport', 'Report_GetDetail', {
						rId: id
					}, function(data) {
						//console.log(data);
						if(data.Success == false) {
							swal(data.Message, '', 'error');
						} else {
							var item = data[0];
							$('.leftPart #Id').val(item.Id);
							$('.leftPart #Title').val(item.Title);
							$('.leftPart #Link').val(item.Link);
							$('.leftPart #CIdentification').val(item.CIdentification);
							$('#CIdentification').selectpicker('val', item.CIdentification);

							$(".iconItme img").attr("class", "selectIcon selectIconHide");
							$(".selectIcon").attr("class", "")
							$.each($('.iconItme'), function(index, liItem) {
								//								
								if(item.IconUrl == $(liItem).children('img').attr('src')) {
									$(liItem).children('img').attr("class", "active");
									$(liItem).children('span').attr("class", "selectIcon selectIconShow")
									selectAdd = $(liItem).children('img').attr('src')
								}
							});
						}
					});
				}
			});

			//提交
			$(document).on("click", "#btn-save", function() {

				var tr = $('#ReportList .checkPlan:checked').parents('tr');
				var id = $(tr).find('.Id').text() || 0;

				var action = id === 0 ? "Report_Add" : "Report_Update";
				var msg = id === 0 ? "添加成功" : "修改成功";

				var obj = {};
				obj.Id = id;
				obj.Title = $('#Title').val();
				obj.Link = $('#Link').val();
				obj.CIdentification = $('#CIdentification').selectpicker('val');
				obj.IconUrl = selectAdd;
				//console.log(action, obj);

				if(errorIfNull(obj.Title, "报表标题不能为空") ||
					errorIfNull(obj.Link, "报表链接不能为空") ||
					errorIfNull(obj.CIdentification, "CIdentification不能为空")) {
					return false;
				}

				Y.API2('WxReport', action, obj, function(data) {
					if(data.Success == false) {
						swal(data.Message, '', 'error');
					} else {
						swal(msg, '', 'success');
						resetAllInput();
						loadReportList();
						$(".iconItme img").attr("class", "selectIcon selectIconHide");
						$(".selectIcon").attr("class", "")
						selectAdd = null;
					}
				});
			});

			$(document).on("click", "#addBtn", function() {
				resetAllInput();

				$('#ReportList tr').removeClass('check');
				$('#ReportList tr .checkPlan').iCheck('uncheck');
			});

			$(document).on("click", "#btn-search", function() {
				loadReportList();
			});

			$(document).on("click", "#deleteBtn", function() {
				var tr = $('#ReportList .checkPlan:checked').parents('tr');
				var id = $(tr).find('.Id').text() || 0;
				var title = $(tr).find('.Title').text();

				if(id === 0) {
					swal("请选择要删除的报表", '', 'error');
					return false;
				}

				swal({
					title: "确定删除[" + title + "]吗",
					text: "删除后无法恢复，请谨慎操作！",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "删除",
					cancelButtonText: "取消",
					closeOnConfirm: false
				}, function() {
					Y.API2('WxReport', "Report_Delete", {
						Id: id
					}, function(data) {
						if(data.Success == false) {
							swal(data.Message, '', 'error');
						} else {
							swal("删除成功", '', 'success');
							resetAllInput();
							loadReportList();
						}
					});
				});
			});

			var selectStyle = function(item) {
				$(".iconItme img").attr("class", "selectIcon selectIconHide");
				$(".selectIcon").attr("class", "")
				item.children('img').attr("class", "active")
				item.children('span').attr("class", "selectIcon selectIconShow")
				selectAdd = item.children('img').attr("src")
			}

			$(document).on("click", ".iconItme", function() {
				selectStyle($(this))
			});

			$('#wxWorkSelectList').on('changed.bs.select', function(e) {
				var wxWorkId = $('#wxWorkSelectList').selectpicker('val');
				//console.log(wxWorkId);
				//layer.msg('玩命加载中……', { icon: 16, shade: 0.01, time: 0, maxWidth: 200 });
				loadReportList();
			});

			//默认加载消息模板
			loadReportList();
			loadWxCorpInfoList(["#wxWorkSelectList"]);
			loadCIdentification(["#CIdentification"]);
			bindSelectIcon()

			$(window).resize(function() {
				$('#selectIcon').height(iconItemHeight())
			});
		})
	</script>
</asp:Content>